<template>
  <div>
    <head>
      <meta charset="UTF-8"></meta>
      <title>登录</title>
    </head>
    <div class="body">
      <div class="container">
        <!--        背景圆-->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>

        <div class="form-box" :class="changeActive===1  ? 'changeActive2':'changeActive'">
          <!--    注册-->
          <div class="register-box " v-if="changeActive===2">
            <div class="h3">register</div>
            <input class="input" type="text" placeholder="用户名" v-model="registerForm.username">
            <input class="input" type="phone" placeholder="电话" v-model="registerForm.phone">
            <input class="input" type="password" placeholder="密码" v-model="registerForm.password">
            <input class="input" type="password" placeholder="确认密码" v-model="registerForm.confirmPassword"
                   @keyup.enter="handleRegister">
            <button @click="handleRegister"> 注册</button>
            <!--两个问题，第一个是绑定错事件了，第二是注册的输入框没有绑定数据-->
          </div>
          <!--    登录-->
          <div class="login-box" v-if="changeActive===1 && !showForgetPassword">
            <div class="h1">login</div>
            <input class="input" type="text" placeholder="用户名" v-model="loginForm.username">
            <input class="input" type="password" placeholder="密码" v-model="loginForm.password"
                   @keyup.enter="handleLogin">
            <span><a href="#" @click="showForgetPassword = true">忘记密码?</a></span>
            <button @click="handleLogin">登录</button>
          </div>
          <div class="login-box" v-if="changeActive===1 && showForgetPassword">
            <div class="h1">login</div>
            <input class="input" type="text" placeholder="输入用户名" v-model="forgetPasswordForm.username">
            <input class="input" type="text" placeholder="输入姓名" v-model="forgetPasswordForm.fullName">
            <input class="input" type="password" placeholder="输入新密码" v-model="forgetPasswordForm.password"
                   @keyup.enter="handleUpdate">
            <button @click="handleUpdate">登录</button>

          </div>
        </div>
        <div class="con-box left">
          <div class="h2">欢迎到来 <span>宠物健康管理</span></div>
          <div class="p">登录后，您可以进行<span>宠物</span>健康管理。</div>
          <img src="../../assets/img/荷兰猪.png" alt="">
          <div class="p">已有账号</div>
          <button id="login" @click="changeTab(1)">去登录</button>
        </div>
        <div class="con-box right">
          <div class="h2">欢迎来到 <span>宠物健康管理</span></div>
          <div class="p">快来看看你可爱的<span>宠物</span>吧</div>
          <img src="../../assets/img/哈士奇.png" alt="">
          <div class="p">没有账号？</div>
          <button id="register" @click="changeTab(2)">去注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {checkForget, checkIsAdmin, getUserInfo, updateUserInfo} from "@/api/user";
import {encrypt} from "@/utils/aes";
import {emitter} from "@/utils/eventBus";


export default {
  data() {
    return {
      isNotificationVisible: false,
      changeActive: 1,
      notificationMessage: '',
      notificationType: 'info',
      //登录表单数据
      loginForm: {},
      //注册表单数据
      registerForm: {
        username: '',
        password: '',
        phone: '',
        confirmPassword: '',
      },
      forgetPasswordForm: {
        username: '',
        fullName: '',
        password: '',
      },
      showRegister: false,
      showForgetPassword: false,
    };
  },
  methods: {
    handleUpdate() {
      checkForget(this.forgetPasswordForm).then(res => {
        if (res.code === 200) {
          const form = {
            id: res.data.id,
            password: this.forgetPasswordForm.password
          }
          updateUserInfo(form).then(res => {
            localStorage.clear();
            this.$message({
              type: 'success',
              message: '密码修改成功，请重新登录'
            });
            this.showForgetPassword = false
          })
          this.forgetPasswordForm = {}
        }
      })

    },
    changeTab(value) {
      this.changeActive = value
    },
    setNotification(message, type) {
      this.notificationMessage = message;
      this.notificationType = type;
      this.isNotificationVisible = true;
      setTimeout(() => {
        this.isNotificationVisible = false;
      }, 3000); // 3秒后自动关闭通知
    },
    handleLogin() {
      if (this.loginForm.username && this.loginForm.password) {
        //调用login接口
        request.post("/user/login", this.loginForm).then(response => {
          if (response.code === 200) {
            localStorage.removeItem("token")
            localStorage.removeItem("userInfo")
            localStorage.removeItem("username")
            this.$message({
              type: "success",
              message: "登录成功",
            });
            localStorage.setItem("token", response.data)
          }
          getUserInfo().then(res => {
            localStorage.setItem("userInfo", encrypt(JSON.stringify(res.data)))
            emitter.emit('userLoggedIn', res.data.username)
          })
          checkIsAdmin().then(res => {
            if (res.data === true) {
              localStorage.setItem("userType", "admin")
              this.$router.push({path: '/'})
            } else {
              localStorage.setItem("userType", "user")
              this.$router.push({path: '/petInfo'})
            }
          })
        })
        this.setNotification('登录成功', 'success');
        // 实现跳转逻辑
      } else {
        this.setNotification('登录失败', 'error');
      }
    },
    handleRegister() {

      // 1. 检查必填字段是否为空
      if (!this.registerForm.username || !this.registerForm.phone || !this.registerForm.password || !this.registerForm.confirmPassword) {
        ElMessage({
          type: 'warning',
          message: '请填写完整的注册信息'
        });
        return;
      }

      // 判断两次密码是否一致
      if (this.registerForm.password == this.registerForm.confirmPassword) {
        // 下面这个接口没写所以就是404了
        request.post("/user/register", this.registerForm).then(response => {
          console.log(response)
          if (response.code === 200) {
            this.$message({
              type: "success",
              message: "注册成功",
            });
            this.loginForm.username = this.registerForm.username
            this.loginForm.password = this.registerForm.password
            this.handleLogin()
            localStorage.setItem("token", response.data)
          }
          // this.$router.push({path: '/'})
        })
        this.setNotification('密码与确认密码不一致', 'warning');
        return;
      }
      this.setNotification('注册成功', 'success');
      this.showRegister = false;
    },
    handleForgetPassword() {
      if (this.forgetPasswordForm.username && this.forgetPasswordForm.password) {
        this.setNotification('密码已重置', 'success');
        this.showForgetPassword = false;
      } else {
        this.setNotification('请填写用户名和新密码', 'error');
      }
    },
    toggleRegister() {
      this.showRegister = !this.showRegister;
    },
  },
  mounted() {
    let login = document.getElementById("login");
    let register = document.getElementById("register");
    let form_box = document.getElementsByClassName("form-box")[0];
    let register_box = document.getElementsByClassName("register-box")[0];
    let login_box = document.getElementsByClassName("login-box")[0];

    register.addEventListener("click", () => {
      form_box.style.transform = "translateX(80%)";
      login_box.classList.add("hidden");
      register_box.classList.remove("hidden");
    })
    login.addEventListener("click", () => {
      form_box.style.transform = "translateX(0%)";
      login_box.classList.remove("hidden");
      register_box.classList.add("hidden");
    })
  }
};
</script>

<style scoped>
* {
  /*初始化*/
  margin: 0;
  padding: 0;
}

.body {
  /*background-image: url('../assets/img/login.png');*/
  /*100%窗口高度*/
  height: 100vh;
  /*弹性布局：水平＋居中*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*渐变背景色*/
  background: linear-gradient(200deg, #daa4a7, #9a5e8a);

}

.container {
  background-color: #fff;
  width: 650px;
  height: 415px;
  border-radius: 5px;
  box-shadow: 0px 25px 45px rgba(0, 0, 0, 0.1);
  position: relative;
}

.container .circle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  filter: hue-rotate(calc(var(--x) * 80deg));
  animation: animate 10s linear infinite;
  animation-delay: calc(var(--x) * -2s);
}

@keyframes translateX {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(80%);
  }

}

@keyframes translate2X {
  0% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(0px);
  }

}


@keyframes animate {
  0%, 100% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(50px);
  }
}

.container .circle:nth-child(1) {
  top: -50px;
  right: -60px;
  width: 100px;
  height: 100px;
}

.container .circle:nth-child(2) {
  top: 150px;
  left: -100px;
  width: 120px;
  height: 120px;
  z-index: 2;
}

.container .circle:nth-child(3) {
  bottom: 50px;
  right: -60px;
  width: 80px;
  height: 80px;
  z-index: 2;
}

.container .circle:nth-child(4) {
  bottom: -80px;
  left: 100px;
  width: 60px;
  height: 60px;
  z-index: 2;
}

.container .circle:nth-child(5) {
  top: -80px;
  left: 140px;
  width: 60px;
  height: 60px;
  z-index: 2;
}

.form-box {
  /*绝对定位*/
  position: absolute;

  top: -10%;
  left: 5%;
  background-color: #e1c8dc;
  width: 320px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: 0.5s ease-in-out;
}

.changeActive {
  animation: linear 0.7s translateX;
  transform: translateX(80%);
}

.changeActive2 {
  animation: linear 0.7s translate2X;
  transform: translateX(0%);
}

.login-box {
  /*弹性布局 垂直排列*/
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.register-box {
  /*弹性布局 垂直排列*/
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hidden {
  display: none;
  transition: 0.5s;

}

.h1 {
  height: 50px;
  width: 140px;
  font-size: 40px;
  text-align: center;
  margin-bottom: 25px;
  /*大写*/
  text-transform: uppercase;
  color: #ffffff;
  /*字间距*/
  letter-spacing: 5px;
}

a {
  text-decoration: none;
  font-size: 14px;
  text-align: right;
  position: absolute;


}

.h3 {
  height: 50px;
  width: 200px;
  font-size: 40px;
  text-align: center;
  margin-bottom: 25px;
  /*大写*/
  text-transform: uppercase;
  color: #ffffff;
  /*字间距*/
  letter-spacing: 1px;
}


.input {
  background-color: transparent;
  width: 70%;
  color: #ffffff;
  border: none;
  /*下边框样式*/
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px 0;
  text-indent: 10px;
  margin: 8px 0;
  font-size: 14px;
  letter-spacing: 2px;

}

input::placeholder {
  color: #ffffff;
}

input:focus {
  /*输入框内*/
  color: #a26f8d;
  /*输入框隐藏*/
  outline: none;
  border-bottom: 1px solid #9a5e8a;
  transition: 0.5s;
}

input:focus::placeholder {
  opacity: 0;
}

/*登录按钮*/
.form-box button {
  width: 70%;
  margin-top: 35px;
  background-color: #fff;
  outline: none;
  border-radius: 8px;
  padding: 13px;
  color: #e1c8dc;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
}

.form-box button:hover {
  background-color: #9a5e8a;
  color: #fff;
  transition: 0.5s;
}

.con-box {
  width: 50%;
  /*弹性布局 垂直排列 居中*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*绝对定位 居中*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.con-box.left {
  left: -2%;
}

.con-box.right {
  right: -2%;
}

.h2 {
  color: #a1a8a1;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 4px;
}

.p {
  font-size: 12px;
  letter-spacing: 2px;
  color: #b6b4b4;
  text-align: center;
}

.con-box span {
  color: #ceb6d0;
}

.con-box img {
  width: 150px;
  height: 150px;
  opacity: 0.9;
  margin: 40px 0;

}

.con-box button {
  margin-top: 3%;
  background-color: #f8f6f8;
  color: #c891cb;
  border: 1px solid #887688;
  padding: 6px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
}

.con-box button:hover {
  background-color: #9a5e8a;
  color: #fff;
  transition: 0.5s;
}


/*.login-page {*/
/*  height: 100vh;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  !*background: linear-gradient(135deg, #6a8fff, #88c0ff);*!*/
/*  background-image: url('../assets/img/login.png');*/
/*  font-family: 'Arial', sans-serif;*/
/*  overflow: hidden;*/
/*}*/

/*.login-container {*/

/*  opacity: 0.9;*/
/*  width: 100%;*/
/*  max-width: 500px;*/
/*  padding: 40px;*/
/*  background: #d2c2c8;*/
/*  border-radius: 12px;*/
/*  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);*/
/*  transition: transform 0.3s ease-in-out;*/
/*}*/

/*.sub-title {*/
/*  text-align: center;*/
/*  font-size: 22px;*/
/*  color: #000000;*/
/*  margin-bottom: 10px;*/
/*  font-weight: bold;*/
/*}*/

/*.actions {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  align-items: flex-start;*/
/*}*/

/*.actions .el-button {*/
/*  margin-bottom: 10px;*/
/*}*/

/*@media (max-width: 600px) {*/
/*  .login-container {*/
/*    padding: 25px;*/
/*  }*/
/*}*/
</style>